<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>data-filter</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 列表渲染过滤 -->
      <input type="text" placeholder="请输入关键字" v-model="keyword" />
      <ul>
        <li v-for="(person, index) in newPersons" :key="person.id">
          {{person.id}} --- {{person.name}} --- {{person.age}}
          <input :value="person.age" />
        </li>
      </ul>
      <!-- TODO:实现过滤数据的排序 -->
      <button @click="sortType =1">年龄升序</button>
      <button @click="sortType =2">年龄降序</button>
      <button @click="sortType =1">保持不变</button>
    </div>
    <script>
      new Vue({
          el: '#app',
          data() {
              return {
                  sortType: 0,
                  keyword: '',
                  persons: [
                      { id: 1, name: 'zhaoliying', age: 33 },
                      { id: 2, name: 'yangmi', age: 34 },
                      { id: 3, name: 'qiwei', age: 40 },
                      { id: 4, name: 'dilireba', age: 20 },
                  ],
              };
          },
          computed: {
              newPersons() {
                  // push pop  shift unshift splice
                  // concat  slice
                  // sort  reverce
                  // indexOf  lastIndexOf

                  // forEach  map  filter
                  // find findIndex
                  // some  every  reduce

                  // 至少写出数组的5个方法

                  // filter
                  // 函数或者方法   三要素：功能  参数  返回值
                  // 功能：从原数组当中过滤出符合条件的项 组成一个新数组
                  // 参数：回调函数(item,index,arr) 返回的是一个布尔值的表达式
                  // 返回值： 返回的就是符合条件的所有项组成的新数组
                  let { keyword, persons, sortType } = this;
                  // let arr = persons.filter(function(item,index){
                  //   return item.name.indexOf(keyword) !== -1
                  // })
                  let arr = persons.filter(
                      (item) => item.name.indexOf(keyword) !== -1
                  );
                  //已经利用filter将arr数组进行了过滤操作,但是排序是在过滤的结果上进行处理的
                  if (sortType!== 0) {
                      arr.sort((a,b) =>{
                          if (sortType === 1) {
                              return a.age - b.age;
                      } else {
                          return b.age - a.age;
                      }
                  });
                }

                  return arr;
              },
          },
      });
    </script>
  </body>
</html>
